<template>
	<div class="member">
		<div class="member-header">
			<div class="member-header-avatar">
				<img :src="userInfo.headUrl | avatar" alt />
				<span>{{ userInfo.nickName }}</span>
			</div>
			<!-- <div class="member-header-money">
				<div class="member-header-money-title">累计补贴</div>
				<div class="member-header-money-title-num">¥{{ userInfo.allCommission }}</div>
				<div class="member-header-count">
					<div class="member-header-count-item" @click="navDetail(0)">
						<span>¥{{ userInfo.notCommission | Fixed(2) }}</span>
						<span>入账中</span>
					</div>
					<div class="member-header-count-item" @click="navDetail(1)">
						<span>¥{{ userInfo.alreadyCommission | Fixed(2) }}</span>
						<span>已入账</span>
					</div>
					<div class="member-header-count-item" @click="navDetail(2)">
						<span>¥{{ userInfo.balance | Fixed(2) }}</span>
						<span>可提现</span>
					</div>
				</div>
			</div>-->
			<div class="member-header-moneys">
				<p class="title"><svg-icon class="icon" iconName="balance"></svg-icon>我的钱包</p>
				<div class="panel">
					<div>
						<p>{{ userInfo.allCommission | Fixed(2) }}</p>
						<p>累计补贴</p>
					</div>
					<div>
						<p>{{ userInfo.notCommission | Fixed(2) }}</p>
						<p>入账中</p>
					</div>
					<div>
						<p>{{ userInfo.alreadyCommission | Fixed(2) }}</p>
						<p>已入账</p>
					</div>
					<div>
						<p>{{ userInfo.balance | Fixed(2) }}</p>
						<p>可提现</p>
					</div>
				</div>
			</div>
		</div>
		<!-- NavMenu  -->
		<div class="navmenu-box top">
			<template v-for="(item, index) in NavMenuList">
				<div class="navmenu-item" :id="`step-${index + 1}`" @click="NavMenu(item.link)" v-if="index === 1 || index != 1" :key="index">
					<div>
						<svg-icon class="icon" :iconName="item.icon"></svg-icon>
						<span>{{ item.name }}</span>
					</div>
					<i class="iconfont icon-xiayiye" style="color: #C6C6C6;"></i>
				</div>
			</template>
		</div>
		<div class="navmenu-box bom">
			<div class="navmenu-item top" v-for="(item, index) in NavMenuList2" :key="index" @click="NavMenu(item.link)">
				<div>
					<svg-icon class="icon" :iconName="item.icon"></svg-icon>
					<span>{{ item.name }}</span>
				</div>
				<i class="iconfont icon-xiayiye" style="color: #C6C6C6;"></i>
			</div>
			<!-- test 入口 -->
			<div class="navmenu-item top" @click="free" v-if="userInfo.isWhite == 1">
				<div>
					<svg-icon class="icon" iconName="my-order"></svg-icon>
					<span>付邮即送</span>
				</div>
				<i class="iconfont icon-xiayiye" style="color: #C6C6C6;"></i>
			</div>
			<!-- 今日好物 入口 -->
			<div class="navmenu-item top" @click="today(11)">
				<div>
					<svg-icon class="icon" iconName="my-order"></svg-icon>
					<span>今日好物</span>
				</div>
				<i class="iconfont icon-xiayiye" style="color: #C6C6C6;"></i>
			</div>
			<!-- 通用券 入口 -->
			<div class="navmenu-item top" v-if="userInfo.isWhite == 1">
				<div>
					<svg-icon class="icon" iconName="my-order"></svg-icon>
					<span>通用券</span>
					<input type="text" placeholder="靓仔靓妹请输入通用券" v-model="couponId" />
					<button @click="today2(12, couponId)">跳转</button>
				</div>
				<i class="iconfont icon-xiayiye" style="color: #C6C6C6;"></i>
			</div>
			<!-- <div class="navmenu-item top" @click="today2(12, 6293)">
				<div>
					<svg-icon class="icon" iconName="my-order"></svg-icon>
					<span>通用券 优惠券ID6293</span>
				</div>
				<i class="iconfont icon-xiayiye" style="color: #C6C6C6;"></i>
			</div> -->
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import { getStore } from '../../utils/store';
import store from 'store';
// import GuideDemo from '@/components/guide';

export default {
	name: 'member-center',
	components: {
		// GuideDemo
	},
	data() {
		return {
			NavMenuList: [
				{
					name: '补贴订单',
					icon: 'my-order',
					link: '/member-order'
				},
				{
					name: '优选订单',
					icon: 'my-order'
				},
				{
					name: '提现记录',
					icon: 'record',
					link: '/member-record'
				},
				{
					name: '我的余额',
					icon: 'balance',
					link: '/member-balance'
				},
				{
					name: '资金明细',
					icon: 'zichan',
					link: '/member-zichan'
				}
			],
			NavMenuList2: [
				{
					name: '常见问题',
					icon: 'help',
					link: '/member-help'
				},
				{
					name: '客服中心',
					icon: 'service',
					link: '/member-service'
				},
				{
					name: '意见反馈',
					icon: 'opinion',
					link: '/member-opinion'
				},
				{
					name: '设置',
					icon: 'setting',
					link: '/member-setting'
				}
			],
			couponId: ''
		};
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	mounted() {
		if (getStore('token')) {
			this.$store.dispatch('GET_USERINFO');
		} else {
			this.$store.dispatch('LOGIN');
		}

		// this.$nextTick(() => {
		// 	this.$root.$children[0].$refs['guide'].open(4, ({ finish }) => {
		// 		this.$router.push('/member-balance');
		// 		finish();
		// 	});
		// });
	},
	methods: {
		NavMenu(link) {
			this.$store.commit('CLEAR_GUIDE');

			if (link) {
				this.$router.push(link);
			} else {
				this.$service.common.common.selfmallLogin().then(res => {
					store.set('selfInfo', res);
					let { token, expires_time } = res;
					expires_time = expires_time.substring(0, 19);
					expires_time = expires_time.replace(/-/g, '/');
					expires_time = new Date(expires_time).getTime();
					window.location.href = `${this.$selfUrl}/order/list/0?token=${token}&expires_time=${expires_time}`; // 跳转自营 订单列表
				});
			}
		},
		navDetail(index) {
			switch (index) {
				case 0:
					this.$router.push('/member-order?type=' + 0);
					break;
				case 1:
					this.$router.push('/member-order?type=' + 1);
					break;
				case 2:
					this.$router.push('/member-balance');
					return;
			}
		},
		free() {
			// window.location.href = 'https://zfx.xmonecode.com/?flashsale=10';
			// window.location.href = 'https://zfx-dev.xmonecode.com/和尚/index.html?flashsale=10'
			// window.location.href = 'http://192.168.0.158:8081?flashsale=10';
			switch (process.env.NODE_ENV) {
				case 'production':
					window.location.href = 'https://zfx.xmonecode.com/?flashsale=10&channel=' + getUrlParams('channel');
					break;
				case 'development':
					window.location.href = 'http://192.168.0.158:8081?flashsale=10&channel=' + getUrlParams('channel');
					break;
				case 'none':
					window.location.href = 'https://zfx-dev.xmonecode.com/和尚/index.html?flashsale=10&channel=' + getUrlParams('channel');
					break;
			}
		},
		today(type) {
			switch (process.env.NODE_ENV) {
				case 'production':
					window.location.href = `https://zfx.xmonecode.com/?flashsale=${type}&channel=${getUrlParams('channel')}`;
					break;
				case 'development':
					window.location.href = `http://192.168.0.158:8081?flashsale=${type}&channel=${getUrlParams('channel')}`;
					break;
				case 'none':
					window.location.href = `https://zfx-dev.xmonecode.com/和尚/index.html?flashsale=${type}&channel=${getUrlParams('channel')}`;
					break;
			}
		},
		today2(type, id) {
			if (!id) return;
			console.log('process.env.NODE_ENV', process.env.NODE_ENV);
			switch (process.env.NODE_ENV) {
				case 'production':
					// window.location.href = `https://zfx-dev.xmonecode.com/和尚/index.html?flashsale=${type}&id=${id}&token=${getStore('token')}`;
					window.location.href = `https://zfx.xmonecode.com/?flashsale=${type}&id=${id}&token=${getStore('token')}&channel=${getUrlParams(
						'channel'
					)}`;
					break;
				case 'development':
					window.location.href = `http://192.168.0.158:8081?flashsale=${type}&id=${id}&token=${getStore('token')}&channel=${getUrlParams(
						'channel'
					)}`;
					break;
				case 'none':
					window.location.href = `https://zfx-dev.xmonecode.com/和尚/index.html?flashsale=${type}&id=${id}&token=${getStore(
						'token'
					)}&channel=${getUrlParams('channel')}`;
					break;
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.member {
	padding-bottom: 200px;

	.member-header {
		background: url('../../assets/images/member/memberbg.png');
		background-size: 100%;
		width: 100%;
		height: 386px;
		position: relative;
		.member-header-avatar {
			display: flex;
			align-items: center;
			padding-top: 48px;
			padding-bottom: 36px;
			padding-left: 54px;
			img {
				width: 88px;
				height: 88px;
				overflow: hidden;
				border-radius: 50%;
				margin-right: 28px;
			}
			span {
				/* prettier-ignore */
				font-size: 16PX;
				color: #fff;
			}
		}
		.member-header-money {
			width: 710px;
			height: 320px;
			background: rgba(255, 255, 255, 1);
			border-radius: 16px;
			margin: 0 auto;
			.member-header-money-title {
				color: #171717;
				/* prettier-ignore */
				font-size: 14PX;
				text-align: center;
				padding: 34px 0 20px;
			}
			.member-header-money-title-num {
				/* prettier-ignore */
				font-size :24PX;
				text-align: center;
				font-weight: 600;
				color: #f70114;
			}
			.member-header-count {
				display: flex;
				align-items: center;
				margin-top: 55px;
				.member-header-count-item {
					display: flex;
					flex-direction: column;
					text-align: center;
					height: 62px;
					flex: 1;
					border-right: solid 1px #c6c6c6;
					&:nth-last-child(1) {
						border-right: solid 1px #ffffff;
					}
					span:nth-child(1) {
						/* prettier-ignore */
						font-size :16PX;
						margin-top: -20px;
					}
					span:nth-child(2) {
						/* prettier-ignore */
						font-size: 14PX;
						font-weight: 400;
						margin-top: 6px;
					}
				}
			}
		}
		.member-header-moneys {
			width: 710px;
			height: 216px;
			background-color: #fff;
			position: absolute;
			top: 218px;
			left: 20px;
			border-radius: 16px;
			padding: 30px;
			.title {
				font-size: 28px;
				margin-bottom: 28px;
				.icon {
					font-size: 44px;
					margin-right: 28px;
					vertical-align: middle;
				}
			}
			.panel {
				@include flexBox(space-between, center);
				padding: 0 20px;
				div {
					position: relative;
					text-align: center;
					:nth-child(1) {
						color: #f70114;
						font-size: 36px;
						font-weight: bold;
					}
					:nth-child(2) {
						font-size: 24px;
						color: #717076;
					}
				}
				div::after {
					content: '';
					position: absolute;
					top: 16px;
					left: 128px;
					width: 1px;
					height: 62px;
					background-color: #e8e8e8;
				}
			}
		}
	}
	.navmenu-box {
		// display: flex;
		// flex-wrap: wrap;
		width: 710px;
		// height: 368px;
		/* prettier-ignore */
		font-size: 14PX;
		border-radius: 16px;
		color: #171717;
		text-align: center;
		background: rgba(255, 255, 255, 1);
		background-color: #fff;
		margin: 65px auto 0 auto;
		// padding: 46px 30px;
		box-sizing: border-box;
		.navmenu-item {
			width: 100%;
			height: 100px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30px;
			background-color: #fff;
			position: relative;
			.icon {
				vertical-align: middle;
				font-size: 44px;
				margin-right: 28px;
			}
			span {
				vertical-align: middle;
			}
		}
	}
	.top {
		margin-bottom: 20px;
	}
	.bom {
		margin-top: 0;
	}
}
</style>
